<template>
	<view>
		<view class="centre-fixed" style="position: fixed;z-index: 2;background-color: #DCE1F5;width: 100%;">
			<view class="centre-top row" :style="`padding-top:${heightTop}rpx`">
				<view class="row"
					style="justify-content: space-between;align-items: center;width: 100%;padding: 0rpx 30rpx;">
					<zywork-icon @click="navigateBack" type="icon-zuojiantou" color="#ffffff" size="50"></zywork-icon>
					<text  style="color: #fff;font-size: 40rpx;">每日任务</text>
					<zywork-icon @click="navTo('task-specification')"  type="icon-bangzhu" color="#ffffff" size="50"></zywork-icon>
				</view>
			</view>
			<view class="centre-top1 row" @click="navTo('task-detail')" style="justify-content: space-around;position: relative;z-index: 1;">
				<view class="row container-top" style="top:85rpx">
					<text style="color: #D5D5D5;">当前能量</text>
					<text style="width: 2rpx;height: 30rpx;background-color: #D5D5D5;margin-left: 30rpx;"></text>
					<text style="font-size: 50rpx;margin-left: 110rpx;">{{userDetail.userLevelValue}}</text>
					<zywork-icon type="icon-youjiantou1" style="margin-left: auto;" color="#D5D5D5" size="36"></zywork-icon>
				</view>
			</view>
		</view>
		
		<view class="container" :style="`padding-top:${height}rpx`">
			<view class="" style="width: 100%;background-color: #FFFFFF;border-radius: 15rpx;padding: 50rpx 0rpx;">
				<view class="container-title row" style="align-items: center;">
					<view class="">

					</view>
					<text>
						日常任务
					</text>
				</view>
				<view class="row list-item"  hover-class="view-active"	>
					<image src="/static/coins@3x.png" style="width: 90rpx;height: 90rpx;" mode=""></image>
					<view class="column" style="margin-left: 30rpx;">
						<text style="font-size: 34rpx;">每日签到 {{isSignIn?'(1/1)':'(0/1)'}}</text>
						<text style="font-size: 26rpx;color: #9F9F9F;margin-top: 10rpx;">预计获得正能量5~150</text>
					</view>
					<view v-if="isSignIn" class="button" style="">
						已签到
					</view>
					<view v-else class="button-active" style="" @click="startSignIn">
						去签到
					</view>
				</view>
				<!-- <view class="row list-item"   hover-class="view-active">
					<image src="/static/coins@3x.png" style="width: 90rpx;height: 90rpx;" mode=""></image>
					<view class="column" style="margin-left: 30rpx;">
						<text style="font-size: 34rpx;">每日答题 (0/1)</text>
						<text style="font-size: 26rpx;color: #9F9F9F;margin-top: 10rpx;">正能量+5</text>
					</view>
					<view class="button-active" style="">
						去完成
					</view>
				</view> -->
			</view>
		</view>

		<!-- <view class="container">
			<view class="" style="width: 100%;background-color: #FFFFFF;border-radius: 15rpx;padding: 50rpx 0rpx;">
				<view class="container-title row" style="align-items: center;">
					<view class="">

					</view>
					<text>
						账号任务
					</text>
				</view>
				<view class="row list-item"  hover-class="view-active" @click="navTo('/pages/user/user-update/user-update')" @longpress="logoTime($event)">
					<image src="/static/user-my.jpg" style="width: 90rpx;height: 90rpx;" mode=""></image>
					<view class="column" style="margin-left: 30rpx;">
						<text style="font-size: 34rpx;">首次上传头像 (1/1)</text>
						<text style="font-size: 26rpx;color: #9F9F9F;margin-top: 10rpx;">正能量+5</text>
					</view>
					<view class="button" style="">
						已完成
					</view>
				</view>
				<view class="row list-item"   hover-class="view-active">
					<image src="/static/coins@3x.png" style="" mode=""></image>
					<view class="column" style="margin-left: 30rpx;">
						<text style="font-size: 34rpx;">绑定手机 (0/1)</text>
						<text style="font-size: 26rpx;color: #9F9F9F;margin-top: 10rpx;">正能量+5</text>
					</view>
					<view class="button-active" style="">
						去完成
					</view>
				</view>
				<view class="row list-item" hover-class="view-active" >
					<image src="/static/coins@3x.png" style="" mode=""></image>
					<view class="column" style="margin-left: 30rpx;">
						<text style="font-size: 34rpx;">绑定手机 (0/1)</text>
						<text style="font-size: 26rpx;color: #9F9F9F;margin-top: 10rpx;">正能量+5</text>
					</view>
					<view class="button-active" style="">
						去完成
					</view>
				</view>
				<view class="row list-item" hover-class="view-active" >
					<image src="/static/coins@3x.png" style="" mode=""></image>
					<view class="column" style="margin-left: 30rpx;">
						<text style="font-size: 34rpx;">绑定手机 (0/1)</text>
						<text style="font-size: 26rpx;color: #9F9F9F;margin-top: 10rpx;">正能量+5</text>
					</view>
					<view class="button-active" style="">
						去完成
					</view>
				</view>
			</view>
		</view> -->
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="sign-in column" style="">
				<view class="" style="text-align: center;color: #FFFFFF;margin-top: 190rpx;font-size: 40rpx;">
					今日签到
				</view>
				<view class="" style="text-align: center;color: #FFF3DB;margin-top: 90rpx;font-size: 60rpx;margin-left: 30rpx;">
					恭喜您签到成功！
				</view>
				<view class="" style="text-align: center;color: #FFD45D;margin-top: 20rpx;font-size: 60rpx;">
					+{{signInDate.intregral}}云豆
				</view>
				<view class="" style="text-align: center;color: #FFD45D;margin-top: 20rpx;font-size: 60rpx;">
					+{{signInDate.levelValue}}正能量
				</view>
				<view class="sign-button">
					领取更多云豆
				</view>
			</view>
			<view class="" style="width: 80rpx;height: 80rpx;position: relative;top: 40rpx;left: 50%;transform: translate(-50%, 0%);" @click="$refs.popup.close()">
				<zywork-icon type="icon-guanbi1" color="#fff" size="80"></zywork-icon>
			</view>
			<!-- <image style="width: 670rpx;" src="/static/popup.png" mode="widthFix"></image> -->
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				heightTop: 15,
				height: 180,
				signInDate:"",
				isSignIn:false,
				userDetail:""
			};
		},
		created() {
			console.log("初始化")
			this.heightTop += uni.getSystemInfoSync().statusBarHeight
			this.height += this.heightTop
			this.time = setTimeout(() => {
				 this.$nextTick(() => {
					 var query = uni.createSelectorQuery().in(this);
					 query.select('.centre-fixed').boundingClientRect();  
					 query.exec(data => {  
						this.height += data[0].height
					 });
				 })
			}, 100)
		},
		onShow() {
			this.querySignInState();
			this.getGrades();
		},
		methods:{
			getGrades(){
				console.log("获取个人等级信息")
				this.$util.doGet('/userLevel/getUserDetail', {}, {}, true).then(res1 => {
					if(res1.data.code == this.$ResponseStatus.OK){
						this.userDetail = res1.data.data
					}
				}).catch(error => {
					console.log(error)
				})
			},
			//开始签到
			startSignIn(){
				if(this.isSignIn){
					return
				}
				this.isSignIn =true
				this.$util.doPostJson("/signIn/saveSignInIntegral", {
					type: 1
				}, {}, true).then(res => {
					if(res.data.code == this.$ResponseStatus.OK){
						this.$refs.popup.open()
						this.signInDate = res.data.data
						this.userDetail.userLevelValue+=this.signInDate.levelValue
					}else {
						this.isSignIn =false
					}
				}).catch(error => {
					console.log(error)
					this.isSignIn =false
				})
			},
			//查询是否签到过
			querySignInState(){
				this.$util.doGet("/signIn/checkUserDailySign", {}, {}, true).then(res => {
					if(res.data.code == this.$ResponseStatus.OK){
						if(res.data.data==1){
							this.isSignIn =true
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			logoTime(e){
				console.log(e)
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			navigateBack(){
				uni.navigateBack({})
			}
		},
		beforeDestroy() {
			clearTimeout(this.time)
			this.time = null;
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #DCE1F5;
	}
	
	.sign-in {
		background-image: url('~@/static/popup.png');
		width: 700rpx;
		background-size: 100% 100%;
		height: 830rpx;
		position: relative;
		
		.sign-button{
			width: 500rpx;
			text-align: center;
			padding: 20rpx 0rpx;
			background:linear-gradient(to right,#FEEA9F,#F9D376,#F5C164);
			font-size: 40rpx;
			color: #C23916;
			border-radius: 60rpx;
			margin: 50rpx auto;
			font-weight: 800;
		}
	}
	
	.list-item{
		align-items: center;padding: 0rpx 35rpx;
		margin: 50rpx 0rpx;
	}

	.button-active {
		padding: 10rpx 30rpx;
		background-color: #00aaff;
		color: #FFFFFF;
		border-radius: 60rpx;
		font-size: 34rpx;
		margin-left: auto;
	}

	.button {
		padding: 10rpx 30rpx;
		background-color: #CDCDCD;
		color: #FFFFFF;
		border-radius: 60rpx;
		font-size: 34rpx;
		margin-left: auto;
	}

	.container-top {
		align-items: center;
		width: 620rpx;
		border-radius: 60rpx;
		background-color: #FFFFFF;
		position: absolute;
		padding: 30rpx 35rpx;
	}

	.centre-top {
		width: 100%;
		background-color: $index-bg-top;
		height: 110rpx;
		top: 0rpx;
		// padding-top: ;
	}

	.centre-top1 {
		width: 100%;
		height: 260rpx;
		/* #ifdef APP-PLUS */
		height: 270rpx;
		/* #endif */
		position: relative;
		z-index: -1;
		overflow: hidden;
	}

	.centre-top1:after {
		content: '';
		width: 120%;
		height: 180rpx;
		position: absolute;
		left: -10%;
		top: 0;
		z-index: -1;
		border-radius: 0 0 40% 40%;
		background: $index-bg-top;
	}

	.container {
		padding: 20rpx 35rpx;

		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}

	.container-title {
		font-size: 40rpx;
		view {
			width: 10rpx;
			height: 40rpx;
			text-align: center;
			background-color: $index-bg-top;
			margin-right: 30rpx;
		}

		text {
			font-size: 40rpx;
		}
	}
</style>
